<template>
  <div class="content">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="护士账号" prop="pass">
        <el-input
          disabled
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="账号权限" prop="checkPass">
        <el-select v-model="ruleForm.USerlimits" disabled placeholder="请选择">
          <el-option
            v-for="item in limits"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="旧密码" prop="oldpwd">
        <el-input v-model="ruleForm.oldpwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newpwd">
        <el-input v-model="ruleForm.newpwd"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="ruleForm.idcard"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="科室更改" prop="administrative">
        <el-select v-model="ruleForm.department" placeholder="请选择">
          <el-option
            v-for="item in administrativeLsit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像" prop="userImg">
        <el-upload
          class="avatar-uploader"
          action="http://129.211.169.131:21003/users/uploadheader"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          
        >
          <img v-if="ruleForm.heads" :src="ruleForm.heads" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  accountCheck,
  pwdcheck,
  IDUnber,
  cellPhone,
  userNames,
} from "@/utils/validdator.js";
import { api_doctor_edit_nurse } from "@/apis/nurse";
export default {
  data() {
    return {
      ruleForm: {
        account: "",
        USerlimits: "护士",
        oldpwd: "a123456",
        newpwd: "a123456",
        name: "",
        idcard: "510723199805021516",
        phone: "18581510015",
        department: "脑科",
        heads: "",
        id: 0,
        head: "",
      },
      limits: [
        {
          value: "护士",
          label: "护士",
        },
        {
          value: "护士长",
          label: "护士长",
        },
      ],

      administrativeLsit: [
        {
          value: "骨科",
          label: "骨科",
        },
        {
          value: "内科",
          label: "内科",
        },
        {
          value: "脑科",
          label: "脑科",
        },
      ],

      rules: {
        oldpwd: [{ validator: pwdcheck, trigger: "blur" }],
        newPwd: [{ validator: pwdcheck, trigger: "blur" }],
        newpwd: [{ validator: userNames, trigger: "blur" }],
        idcard: [{ validator: IDUnber, trigger: "blur" }],
        phone: [{ validator: cellPhone, trigger: "blur" }],
      },
    };
  },
  created() {
    this.ruleForm.name = this.$store.state.userInfo.name;
    this.ruleForm.heads = this.$store.state.userInfo.head;
    this.ruleForm.id = this.$store.state.userInfo.id;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await api_doctor_edit_nurse(this.ruleForm);
          if(res.data.code==0){
            this.$store.commit("userImg",this.ruleForm.heads)
          }
         
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      console.log(file);
      // console.log(URL.createObjectURL(file.raw));
      this.ruleForm.heads = URL.createObjectURL(file.raw);
      this.ruleForm.head = file.header;
      // this.ruleForm.head=this.ruleForm.head.substring(this.ruleForm.head.lastIndexOf("/"))
      // this.ruleForm.head=this.ruleForm.head.slice(1)
      // console.log(this.ruleForm.head);
       

       
      
       


    },
   
  },
};
</script>

<style lang="less" scoped>
.content {
  .el-form {
    .el-input {
      width: 500px;
    }
  }
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>